<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Checkbox - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
  <style>
    ion-checkbox.checkbox-part::part(mark) {
      transform: scale(.5);
      transform-origin: center;
    }
  </style>
<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Checkbox - Basic</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content id="content">
      <ion-item>
        <ion-label>Default</ion-label>
        <ion-checkbox checked></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Primary</ion-label>
        <ion-checkbox checked color="primary" slot="end"></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Secondary</ion-label>
        <ion-checkbox checked color="secondary"></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Tertiary</ion-label>
        <ion-checkbox checked color="tertiary"></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Success</ion-label>
        <ion-checkbox checked color="success"></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Warning</ion-label>
        <ion-checkbox checked color="warning"></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Dark</ion-label>
        <ion-checkbox checked color="dark" style="--size: 100px;"></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Danger</ion-label>
        <ion-checkbox checked color="danger" slot="start"></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Light</ion-label>
        <ion-checkbox checked color="light" slot="start"></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Medium</ion-label>
        <ion-checkbox checked color="medium" slot="start"></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Dark</ion-label>
        <ion-checkbox checked color="dark" slot="start" style="--size: 100px;"></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Checkmark width</ion-label>
        <ion-checkbox checked color="dark" slot="start" style="--checkmark-width: 7;"></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Checkmark ::part</ion-label>
        <ion-checkbox checked color="dark" slot="start" class="checkbox-part"></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Unchecked by Default</ion-label>
        <ion-checkbox></ion-checkbox>
      </ion-item>

      <ion-item>
        <ion-label>Disabled</ion-label>
        <ion-checkbox disabled></ion-checkbox>
      </ion-item>
    </ion-content>

  </ion-app>
</body>

</html>
